<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户信息管理</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.3s;
      max-width: 800px;
      margin: 0 auto;
    }
    .layui-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .layui-card-header {
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
    }
    .search-container {
      padding: 15px 20px;
      background-color: #F1F5F9;
      border-bottom: 1px solid #E2E8F0;
    }
    .form-container {
      padding: 25px;
    }
    .layui-form-item {
      margin-bottom: 20px;
    }
    .layui-form-label {
      padding: 9px 15px;
      color: #334155;
      font-weight: 500;
      width: 120px;
    }
    .layui-input-block {
      margin-left: 150px;
    }
    .layui-input, .layui-select, .layui-textarea {
      border-radius: 4px;
      padding: 9px 15px;
    }
    .layui-btn {
      transition: all 0.2s;
      border-radius: 4px;
      cursor: pointer;
    }
    .layui-btn-primary:hover {
      background-color: #F1F5F9;
      color: #1E293B;
    }
    .layui-btn-normal:hover {
      background-color: #3B82F6;
    }
    .avatar-container {
      text-align: center;
      margin-bottom: 30px;
    }
    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #FFFFFF;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
    }
    .upload-avatar-btn {
      background-color: rgba(59, 130, 246, 0.1);
      color: #3B82F6;
      border: 1px dashed #93C5FD;
    }
    .upload-avatar-btn:hover {
      background-color: rgba(59, 130, 246, 0.2);
      color: #2563EB;
      border-color: #60A5FA;
    }
    .form-section {
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px dashed #E2E8F0;
    }
    .form-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .form-section-title {
      font-size: 15px;
      color: #2C3E50;
      margin-bottom: 15px;
      padding-left: 5px;
      border-left: 3px solid #3B82F6;
    }
    .action-buttons {
      text-align: center;
      margin-top: 30px;
    }
    .action-buttons .layui-btn {
      margin: 0 10px;
    }
    .required-mark {
      color: #F56C6C;
      margin-right: 4px;
    }
    .password-strength {
      margin-top: 5px;
      height: 6px;
      width: 100%;
      background-color: #F1F5F9;
      border-radius: 3px;
      overflow: hidden;
      display: none;
    }
    .strength-bar {
      height: 100%;
      width: 0%;
      transition: width 0.3s ease;
    }
    .strength-text {
      margin-top: 5px;
      font-size: 12px;
      color: #64748B;
      display: none;
    }
    .field-hint {
      margin-top: 5px;
      font-size: 12px;
      color: #94A3B8;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #F1F5F9;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
    .search-result-item {
      padding: 10px 15px;
      border-bottom: 1px solid #F1F5F9;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .search-result-item:last-child {
      border-bottom: none;
    }
    .search-result-item:hover {
      background-color: #F8FAFC;
    }
    .search-result-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
      float: left;
    }
    .search-result-info {
      margin-left: 50px;
    }
    .search-result-name {
      font-weight: 500;
      margin-bottom: 3px;
    }
    .search-result-department {
      font-size: 12px;
      color: #64748B;
    }
    .search-result-no-data {
      padding: 30px;
      text-align: center;
      color: #94A3B8;
    }
    .search-advanced-toggle {
      color: #3B82F6;
      font-size: 12px;
      cursor: pointer;
      display: inline-block;
      margin-left: 10px;
    }
    .search-advanced {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #E2E8F0;
      display: none;
    }
    .search-advanced.active {
      display: block;
    }
  </style>
</head>
<body>
  <!-- 主内容区域 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h2><i class="fa fa-user-circle"></i> 用户信息管理</h2>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-container layui-form">
      <div class="layui-form-item">
        <div class="layui-input-inline" style="width: 300px;">
          <input type="text" name="searchKeyword" placeholder="请输入用户名、姓名或邮箱搜索" autocomplete="off" class="layui-input" id="searchKeyword">
        </div>
        <button class="layui-btn" lay-submit lay-filter="searchBtn"><i class="fa fa-search"></i> 搜索</button>
        <span class="search-advanced-toggle" id="advancedToggle">高级搜索</span>
        
        <!-- 高级搜索选项 -->
        <div class="search-advanced" id="advancedSearch">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label" style="width: auto;">部门</label>
              <div class="layui-input-inline" style="width: 150px;">
                <select name="searchDepartment">
                  <option value="">全部部门</option>
                  <option value="computer">计算机学院</option>
                  <option value="electronic">电子信息学院</option>
                  <option value="mathematics">数学学院</option>
                  <option value="physics">物理学院</option>
                  <option value="chemistry">化学学院</option>
                  <option value="management">管理学院</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label" style="width: auto;">职称</label>
              <div class="layui-input-inline" style="width: 150px;">
                <select name="searchTitle">
                  <option value="">全部职称</option>
                  <option value="professor">教授</option>
                  <option value="associate">副教授</option>
                  <option value="lecturer">讲师</option>
                  <option value="assistant">助教</option>
                  <option value="researcher">研究员</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label" style="width: auto;">用户类型</label>
              <div class="layui-input-inline" style="width: 120px;">
                <select name="searchUserType">
                  <option value="">全部类型</option>
                  <option value="admin">管理员</option>
                  <option value="teacher">教师</option>
                  <option value="student">学生</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 用户信息表单 -->
    <form class="layui-form form-container" lay-filter="userInfoForm">
      <!-- 头像上传区域 -->
      <div class="avatar-container">
        <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="avatar" id="avatarImg">
        <div>
          <button type="button" class="layui-btn upload-avatar-btn" id="uploadAvatar">
            <i class="fa fa-upload"></i> 更换头像
          </button>
          <p class="field-hint">支持JPG、PNG格式，建议尺寸200×200像素</p>
        </div>
      </div>
      
      <!-- 基本信息部分 -->
      <div class="form-section">
        <h3 class="form-section-title">基本信息</h3>
        
        <div class="layui-form-item">
          <label class="layui-form-label">
            <span class="required-mark">*</span>用户名
          </label>
          <div class="layui-input-block">
            <input type="text" name="username" value="zhangjiawei" autocomplete="off" class="layui-input" readonly>
            <p class="field-hint">用户名不可修改</p>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">
            <span class="required-mark">*</span>姓名
          </label>
          <div class="layui-input-block">
            <input type="text" name="fullname" value="张家伟" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" lay-verify="required">
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" name="gender" value="male" title="男" checked>
            <input type="radio" name="gender" value="female" title="女">
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">
            <span class="required-mark">*</span>联系电话
          </label>
          <div class="layui-input-block">
            <input type="tel" name="phone" value="13800138000" placeholder="请输入联系电话" autocomplete="off" class="layui-input" lay-verify="required|phone">
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">
            <span class="required-mark">*</span>电子邮箱
          </label>
          <div class="layui-input-block">
            <input type="email" name="email" value="zhangjiawei@example.com" placeholder="请输入电子邮箱" autocomplete="off" class="layui-input" lay-verify="required|email">
            <p class="field-hint">用于接收系统通知和密码重置</p>
          </div>
        </div>
      </div>
      
      <!-- 个人资料部分 -->
      <div class="form-section">
        <h3 class="form-section-title">个人资料</h3>
        
        <div class="layui-form-item">
          <label class="layui-form-label">所属部门</label>
          <div class="layui-input-block">
            <select name="department">
              <option value="">请选择部门</option>
              <option value="computer" selected>计算机学院</option>
              <option value="electronic">电子信息学院</option>
              <option value="mathematics">数学学院</option>
              <option value="physics">物理学院</option>
              <option value="chemistry">化学学院</option>
              <option value="management">管理学院</option>
            </select>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">职称</label>
          <div class="layui-input-block">
            <select name="title">
              <option value="">请选择职称</option>
              <option value="professor" selected>教授</option>
              <option value="associate">副教授</option>
              <option value="lecturer">讲师</option>
              <option value="assistant">助教</option>
              <option value="researcher">研究员</option>
            </select>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">研究方向</label>
          <div class="layui-input-block">
            <input type="text" name="researchField" value="人工智能、机器学习、计算机视觉" placeholder="请输入研究方向" autocomplete="off" class="layui-input">
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">个人简介</label>
          <div class="layui-input-block">
            <textarea name="bio" placeholder="请输入个人简介" class="layui-textarea" rows="4">张家伟，教授，博士生导师，主要从事人工智能与计算机视觉领域的研究工作，主持国家级科研项目3项，发表SCI论文30余篇。</textarea>
          </div>
        </div>
      </div>
      
      <!-- 密码修改部分 -->
      <div class="form-section">
        <h3 class="form-section-title">密码修改</h3>
        
        <div class="layui-form-item">
          <label class="layui-form-label">
            <span class="required-mark">*</span>原密码
          </label>
          <div class="layui-input-block">
            <input type="password" name="oldPassword" placeholder="请输入原密码" autocomplete="off" class="layui-input" lay-verify="required">
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">
            <span class="required-mark">*</span>新密码
          </label>
          <div class="layui-input-block">
            <input type="password" name="newPassword" placeholder="请输入新密码" autocomplete="off" class="layui-input" lay-verify="required|min:8" id="newPassword">
            <div class="password-strength">
              <div class="strength-bar" id="strengthBar"></div>
            </div>
            <div class="strength-text" id="strengthText"></div>
            <p class="field-hint">密码长度至少8位，建议包含字母、数字和特殊字符</p>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">
            <span class="required-mark">*</span>确认密码
          </label>
          <div class="layui-input-block">
            <input type="password" name="confirmPassword" placeholder="请再次输入新密码" autocomplete="off" class="layui-input" lay-verify="required|confirm:newPassword">
          </div>
        </div>
      </div>
      
      <!-- 按钮区域 -->
      <div class="action-buttons">
        <button class="layui-btn" lay-submit lay-filter="saveBtn"><i class="fa fa-save"></i> 保存修改</button>
        <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-undo"></i> 重置</button>
        <button type="button" class="layui-btn layui-btn-danger" id="cancelBtn"><i class="fa fa-times"></i> 取消</button>
      </div>
    </form>
  </div>
  
  <!-- 搜索结果弹窗 -->
  <div class="layui-modal" id="searchResultModal" style="display: none; width: 600px; margin-left: -300px;">
    <div class="layui-modal-title">用户搜索结果</div>
    <div class="layui-modal-body" style="padding: 0; max-height: 400px; overflow-y: auto;">
      <div id="searchResultContent">
        <!-- 搜索结果将通过JS动态填充 -->
      </div>
    </div>
    <div class="layui-modal-footer">
      <button class="layui-btn" id="closeSearchResult">关闭</button>
    </div>
  </div>
  
  <!-- 页脚信息 -->
  <div class="footer">
    © 高校科研管理系统 - 版权所有
  </div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // 初始化layui模块
    layui.use(['form', 'upload', 'layer'], function() {
      const form = layui.form;
      const upload = layui.upload;
      const layer = layui.layer;
      
      // 渲染表单
      form.render();
      
      // 高级搜索切换
      document.getElementById('advancedToggle').addEventListener('click', function() {
        const advancedSearch = document.getElementById('advancedSearch');
        advancedSearch.classList.toggle('active');
        
        if (advancedSearch.classList.contains('active')) {
          this.innerText = '收起高级搜索';
        } else {
          this.innerText = '高级搜索';
        }
      });
      
      // 搜索功能
      form.on('submit(searchBtn)', function(data) {
        const keyword = data.field.searchKeyword;
        const department = data.field.searchDepartment;
        const title = data.field.searchTitle;
        const userType = data.field.searchUserType;
        
        // 显示加载中
        layer.load();
        
        // 模拟搜索请求
        setTimeout(function() {
          layer.closeAll('loading');
          
          // 模拟搜索结果数据
          const results = [
            {
              id: '1001',
              username: 'zhangjiawei',
              fullname: '张家伟',
              avatar: 'https://picsum.photos/200/200?random=1',
              department: '计算机学院',
              title: '教授',
              email: 'zhangjiawei@example.com'
            },
            {
              id: '1002',
              username: 'liming',
              fullname: '李明',
              avatar: 'https://picsum.photos/200/200?random=2',
              department: '计算机学院',
              title: '副教授',
              email: 'liming@example.com'
            },
            {
              id: '1003',
              username: 'wanghong',
              fullname: '王红',
              avatar: 'https://picsum.photos/200/200?random=3',
              department: '电子信息学院',
              title: '教授',
              email: 'wanghong@example.com'
            },
            {
              id: '1004',
              username: 'zhaoliang',
              fullname: '赵亮',
              avatar: 'https://picsum.photos/200/200?random=4',
              department: '管理学院',
              title: '讲师',
              email: 'zhaoliang@example.com'
            }
          ];
          
          // 生成搜索结果HTML
          let resultHtml = '';
          
          if (results.length > 0) {
            results.forEach(user => {
              resultHtml += `
                <div class="search-result-item" data-id="${user.id}">
                  <img src="${user.avatar}" alt="${user.fullname}的头像" class="search-result-avatar">
                  <div class="search-result-info">
                    <div class="search-result-name">${user.fullname} (${user.username})</div>
                    <div class="search-result-department">${user.department} · ${user.title} · ${user.email}</div>
                  </div>
                  <div style="clear: both;"></div>
                </div>
              `;
            });
          } else {
            resultHtml = `
              <div class="search-result-no-data">
                <i class="fa fa-search" style="font-size: 30px; margin-bottom: 10px; display: block;"></i>
                没有找到匹配的用户，请尝试其他搜索条件
              </div>
            `;
          }
          
          // 填充结果并显示弹窗
          document.getElementById('searchResultContent').innerHTML = resultHtml;
          document.getElementById('searchResultModal').style.display = 'block';
          
          // 为搜索结果项添加点击事件
          document.querySelectorAll('.search-result-item').forEach(item => {
            item.addEventListener('click', function() {
              const userId = this.getAttribute('data-id');
              // 这里可以根据用户ID加载该用户的详细信息
              layer.msg(`正在查看用户ID: ${userId} 的信息`, {icon: 0, time: 1500});
              
              // 关闭搜索结果弹窗
              document.getElementById('searchResultModal').style.display = 'none';
            });
          });
        }, 800);
        
        return false;
      });
      
      // 关闭搜索结果弹窗
      document.getElementById('closeSearchResult').addEventListener('click', function() {
        document.getElementById('searchResultModal').style.display = 'none';
      });
      
      // 初始化头像上传
      upload.render({
        elem: '#uploadAvatar',
        url: '/upload/avatar/',  // 实际使用时替换为真实上传接口
        auto: true,
        accept: 'images',
        exts: 'jpg|png|jpeg',
        size: 2048,  // 最大2MB
        before: function(obj) {
          // 上传前预览
          obj.preview(function(index, file, result) {
            document.getElementById('avatarImg').src = result;
          });
          layer.load(); // 上传loading
        },
        done: function(res) {
          layer.closeAll('loading'); // 关闭loading
          if (res.code === 0) {
            layer.msg('头像上传成功', {icon: 1, time: 1500});
          } else {
            layer.msg('上传失败: ' + res.msg, {icon: 2, time: 2000});
          }
        },
        error: function() {
          layer.closeAll('loading'); // 关闭loading
          layer.msg('上传失败，请重试', {icon: 2, time: 2000});
        }
      });
      
      // 密码强度检测
      document.getElementById('newPassword').addEventListener('input', function() {
        const password = this.value;
        const strengthBar = document.getElementById('strengthBar');
        const strengthText = document.getElementById('strengthText');
        const strengthContainer = document.querySelector('.password-strength');
        
        if (password.length === 0) {
          strengthContainer.style.display = 'none';
          strengthText.style.display = 'none';
          return;
        }
        
        // 显示强度条
        strengthContainer.style.display = 'block';
        strengthText.style.display = 'block';
        
        // 简单的密码强度检测逻辑
        let strength = 0;
        let strengthDesc = '';
        let barColor = '';
        
        // 长度检测
        if (password.length >= 8) strength += 1;
        if (password.length >= 12) strength += 1;
        
        // 字符类型检测
        if (/[A-Z]/.test(password)) strength += 1; // 大写字母
        if (/[a-z]/.test(password)) strength += 1; // 小写字母
        if (/[0-9]/.test(password)) strength += 1; // 数字
        if (/[^A-Za-z0-9]/.test(password)) strength += 1; // 特殊字符
        
        // 计算强度百分比 (0-100)
        const strengthPercent = Math.min(Math.round((strength / 6) * 100), 100);
        
        // 设置强度描述和颜色
        if (strengthPercent < 30) {
          strengthDesc = '弱 - 建议增加密码复杂度';
          barColor = '#EF4444';
        } else if (strengthPercent < 60) {
          strengthDesc = '中 - 可以增加特殊字符提高强度';
          barColor = '#F59E0B';
        } else {
          strengthDesc = '强 - 密码强度良好';
          barColor = '#10B981';
        }
        
        // 更新UI
        strengthBar.style.width = strengthPercent + '%';
        strengthBar.style.backgroundColor = barColor;
        strengthText.innerText = strengthDesc;
        strengthText.style.color = barColor;
      });
      
      // 保存修改按钮
      form.on('submit(saveBtn)', function(data) {
        // 模拟表单提交
        layer.load();
        
        // 模拟API请求延迟
        setTimeout(function() {
          layer.closeAll('loading');
          
          // 检查是否修改了密码
          const changedPassword = data.field.oldPassword || data.field.newPassword || data.field.confirmPassword;
          
          if (changedPassword) {
            // 密码修改后需要重新登录
            layer.msg('信息修改成功，请重新登录', {
              icon: 1,
              time: 2000
            }, function() {
              // 实际应用中这里会跳转到登录页
              console.log('跳转到登录页');
            });
          } else {
            // 仅修改基本信息
            layer.msg('信息修改成功', {icon: 1, time: 1500});
          }
        }, 1000);
        
        return false; // 阻止表单跳转
      });
      
      // 取消按钮
      document.getElementById('cancelBtn').addEventListener('click', function() {
        layer.confirm('确定要取消吗？未保存的修改将丢失', {
          btn: ['确定', '取消']
        }, function() {
          // 实际应用中可能是返回上一页
          layer.closeAll('dialog');
          // 模拟返回操作
          console.log('返回上一页');
        });
      });
      
      // 重置按钮提示
      document.querySelector('button[type="reset"]').addEventListener('click', function() {
        layer.confirm('确定要重置表单吗？所有修改将被清空', {
          btn: ['确定', '取消']
        }, function(index) {
          layer.close(index);
        }, function(index) {
          // 取消重置，需要阻止默认行为
          layer.close(index);
          return false;
        });
      }, true); // 使用捕获阶段，以便阻止默认行为
    });
  </script>
</body>
</html>
